<%--
  Created by IntelliJ IDEA.
  User: 刘琛
  Date: 2020/10/29
  Time: 17:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%pageContext.setAttribute("APP_PATH", request.getContextPath());%>
<html>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<title>智慧维修</title>

<meta name="description" content="Static &amp; Dynamic Tables" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

<!-- bootstrap & fontawesome -->
<link rel="stylesheet" href="${APP_PATH }/assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="${APP_PATH }/assets/font-awesome/4.5.0/css/font-awesome.min.css" />

<!-- page specific plugin styles -->

<!-- text fonts -->
<link rel="stylesheet" href="${APP_PATH }/assets/css/fonts.googleapis.com.css" />

<!-- ace styles -->
<link rel="stylesheet" href="${APP_PATH }/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />

<!--[if lte IE 9]-->
<%--    <link rel="stylesheet" href="${APP_PATH }/assets/css/ace-part2.min.css" class="ace-main-stylesheet" />--%>
<!--[endif]-->
<link rel="stylesheet" href="${APP_PATH }/assets/css/ace-skins.min.css" />
<link rel="stylesheet" href="${APP_PATH }/assets/css/ace-rtl.min.css" />

<!--[if lte IE 9]-->
<%--    <link rel="stylesheet" href="${APP_PATH }/assets/css/ace-ie.min.css" />--%>
<!--[endif]-->
<link rel="stylesheet" href="${APP_PATH}/assets/fonts/iconfont.css"/>

<!-- inline styles related to this page -->

<!-- ace settings handler -->
<script src="${APP_PATH }/assets/js/ace-extra.min.js"></script>
<head>
    <title>Title</title>
    <h3 align="center">营房维修单</h3>
    <br>
    <div>
        <label>编号:&nbsp;${order.id}</label>
        <jsp:useBean id="time" class="java.util.Date">
            <label class="pull-right" style="text-align-all: right">打印时间：<fmt:formatDate value="<%=time%>" type="both" pattern="yyyy年MM月dd日"/></label>
        </jsp:useBean>
    </div>
    <style>
        @import url(https://fonts.googleapis.com/css?family=Open+Sans);
        body {
            padding: 20px;
            font: 1.4em/1.4em 'Open Sans', sans-serif;
        }
        .module {
            width: 700px;
            margin: 0 0 1em 0;
            overflow: hidden;
        }
        .module p {
            margin: 0;
        }

        .line-clamp {
            display: -webkit-box;
            -webkit-line-clamp: 5;
            -webkit-box-orient: vertical;
        }

        .fade {
            position: relative;
            height: 3.6em; /* exactly three lines */
        }
        .fade:after {
            content: "";
            text-align: right;
            position: absolute;
            bottom: 0;
            right: 0;
            width: 70%;
            height: 1.2em;
            background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
        }

        .ftellipsis {
            height: 3.6em;
        }

        h1 {
            margin: 0 0 1em 0;
        }
        h2 {
            font-size: 1.2em;
        }

    </style>
</head>
<body>
<style type="text/css">
    .AutoNewline
    {
        Word-break: break-all;/*必须*/
        width :5%;/*这里是设置多宽就进行换行 */
    }
    /*td{word-break: break-all; word-wrap:break-word;}*/
</style>


<table border="1" cellspacing="0" style="margin: auto; text-align: center; TABLE-LAYOUT:fixed; WORD-BREAK:break-all; table-layout: fixed; width: 100%; height: 12%" >
    <tr>
        <td class="AutoNewline" style="align-content: center; width: 10%" >申请单位</td>
        <td class="AutoNewline" style="align-content: center; width: 20%" >${order.insiderUnit_name}</td>
        <td class="AutoNewline" style="align-content: center; width: 10%" >报修人</td>
        <td class="AutoNewline" style="align-content: center; width: 20%" >${order.equipment_admin_name}</td>
        <td class="AutoNewline" style="align-content: center; width: 10%" >申请单位领导</td>
        <td class="AutoNewline" style="align-content: center; width: 30%" ></td>
    </tr>
</table>
<table border="1" cellspacing="0" style="margin: auto; text-align: center; TABLE-LAYOUT:fixed; WORD-BREAK:break-all; table-layout: fixed; width: 100%; height: 12%">
    <tr>
        <td class="AutoNewline" style="align-content: center; width: 10%" >维修位置及项目</td>
        <td class="AutoNewline" style="align-content: center; width: 50%" >${order.maintenance_location}</td>
        <td class="AutoNewline" style="align-content: center; width: 10%" >施工人员</td>
        <td class="AutoNewline" style="align-content: center; width: 30%" >${order.unit_name}</td>
    </tr>
</table>
<table border="1" cellspacing="0" style="margin: auto; text-align: center; TABLE-LAYOUT:fixed; WORD-BREAK:break-all; table-layout: fixed; width: 100%; height: 24%">
    <tr>
        <td rowspan="2" class="AutoNewline" style="align-content: center; width: 10%; height: 100%">维修内容（明细）</td>
        <td rowspan="2" class="AutoNewline" style="align-content: center; width: 50%; height: 100%">${order.problem_word}</td>
        <td class="AutoNewline" style="align-content: center; width: 10%; height: 50%">结算价格（元）</td>
        <td class="AutoNewline" style="align-content: center; width: 30%; height: 50%">${order.final_price}</td>
    </tr>
    <tr>
        <td class="AutoNewline" style="align-content: center; width: 10%; height: 50%">现场管理</td>
        <td class="AutoNewline" style="align-content: center; width: 30%; height: 50%"></td>
    </tr>
</table>
<table border="1" cellspacing="0" style="margin: auto; text-align: center; TABLE-LAYOUT:fixed; WORD-BREAK:break-all; table-layout: fixed; width: 100%; height: 12%">
    <tr>
        <td class="AutoNewline" style="align-content: center; width: 10%; height: 100%">分管首长</td>
        <td class="AutoNewline" style="align-content: center; width: 20%; height: 100%">${b}</td>
        <td class="AutoNewline" style="align-content: center; width: 10%; height: 100%">部门领导</td>
        <td class="AutoNewline" style="align-content: center; width: 20%; height: 100%"></td>
        <td class="AutoNewline" style="align-content: center; width: 10%; height: 100%">业务组负责人</td>
        <td class="AutoNewline" style="align-content: center; width: 30%; height: 100%"></td>
    </tr>
</table>

<script>
    // https://github.com/josephschmitt/Clamp.js
    var module = document.getElementById("clampjs");
    $clamp(module, {clamp: 3});


    // https://github.com/ftlabs/ftellipsis
    var element = document.getElementById('ftellipsis');
    var ellipsis = new Ellipsis(element);

    ellipsis.calc();
    ellipsis.set();


    // https://codepen.io/Merri/pen/Dsuim
    /**
     * TextOverflowClamp.js
     *
     * Updated 2013-05-09 to remove jQuery dependancy.
     * But be careful with webfonts!
     */

    // bind function support for older browsers without it
    // https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind
    if (!Function.prototype.bind) {
        Function.prototype.bind = function (oThis) {
            if (typeof this !== "function") {
                // closest thing possible to the ECMAScript 5 internal IsCallable function
                throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
            }

            var aArgs = Array.prototype.slice.call(arguments, 1),
                fToBind = this,
                fNOP = function () {},
                fBound = function () {
                    return fToBind.apply(this instanceof fNOP && oThis
                        ? this
                        : oThis,
                        aArgs.concat(Array.prototype.slice.call(arguments)));
                };

            fNOP.prototype = this.prototype;
            fBound.prototype = new fNOP();

            return fBound;
        };
    }

    // the actual meat is here
    (function(w, d){
        var clamp, measure, text, lineWidth,
            lineStart, lineCount, wordStart,
            line, lineText, wasNewLine,
            ce = d.createElement.bind(d),
            ctn = d.createTextNode.bind(d);

        // measurement element is made a child of the clamped element to get it's style
        measure = ce('span');

        (function(s){
            s.position = 'absolute'; // prevent page reflow
            s.whiteSpace = 'pre'; // cross-browser width results
            s.visibility = 'hidden'; // prevent drawing
        })(measure.style);

        clamp = function (el, lineClamp) {
            // make sure the element belongs to the document
            if(!el.ownerDocument || !el.ownerDocument === d) return;
            // reset to safe starting values
            lineStart = wordStart = 0;
            lineCount = 1;
            wasNewLine = false;
            lineWidth = el.clientWidth;
            // get all the text, remove any line changes
            text = (el.textContent || el.innerText).replace(/\n/g, ' ');
            // remove all content
            while(el.firstChild !== null)
                el.removeChild(el.firstChild);
            // add measurement element within so it inherits styles
            el.appendChild(measure);
            // http://ejohn.org/blog/search-and-dont-replace/
            text.replace(/ /g, function(m, pos) {
                // ignore any further processing if we have total lines
                if(lineCount === lineClamp) return;
                // create a text node and place it in the measurement element
                measure.appendChild(ctn(text.substr(lineStart, pos - lineStart)));
                // have we exceeded allowed line width?
                if(lineWidth < measure.clientWidth) {
                    if(wasNewLine) {
                        // we have a long word so it gets a line of it's own
                        lineText = text.substr(lineStart, pos + 1 - lineStart);
                        // next line start position
                        lineStart = pos + 1;
                    } else {
                        // grab the text until this word
                        lineText = text.substr(lineStart, wordStart - lineStart);
                        // next line start position
                        lineStart = wordStart;
                    }
                    // create a line element
                    line = ce('span');
                    // add text to the line element
                    line.appendChild(ctn(lineText));
                    // add the line element to the container
                    el.appendChild(line);
                    // yes, we created a new line
                    wasNewLine = true;
                    lineCount++;
                } else {
                    // did not create a new line
                    wasNewLine = false;
                }
                // remember last word start position
                wordStart = pos + 1;
                // clear measurement element
                measure.removeChild(measure.firstChild);
            });
            // remove the measurement element from the container
            el.removeChild(measure);
            // create the last line element
            line = ce('span');
            // give styles required for text-overflow to kick in
            (function(s){
                s.display = 'inline-block';
                s.overflow = 'hidden';
                s.textOverflow = 'ellipsis';
                s.whiteSpace = 'nowrap';
                s.width = '100%';
            })(line.style);
            // add all remaining text to the line element
            line.appendChild(ctn(text.substr(lineStart)));
            // add the line element to the container
            el.appendChild(line);
        }
        w.clamp = clamp;
    })(window, document);

    // the only bit of jQuery
    $(window).bind('load', function() {
        clamp(document.getElementById('textoverflowclamp'), 3);
    });
</script>
</body>

</html>
